<template>
    <div class="expandedRowBox">
        <component ref="current" :is="currentView"></component>
    </div>
</template>

<script>
import Vue from 'vue'
import FormBoListPreviewList from "../FormBoListPreviewList";
import FormBoListApi from "@/api/form/core/formBoList";
import PublicApi from "@/api/form/core/public";
import {Util, FormBoListPreview, PublicFunction,CustomViewFunc} from "@lowcode/jpaas-common-lib";
import FormBoListExt from "@/views/modules/form/core/FormBoListExt";

export default {
    name: "RxFormBoList",
    components: {FormBoListPreviewList},
    props: ["config", "record"],
    data() {
        return {
            currentView: {
                template: "<div>" + this.$ti18('rxCommon.Loading','正在加载...') + "</div>"
            },
            html: ""
        }
    },
    created() {
        this.loadList();
        var self=this;
        this.$bus.on("reloadExpandRow",()=>{
            self.loadList();
        })
    },
    methods: {
        loadList() {
            var parameter = {key: this.config.listAlias, params: ''};
            var mapping = [];
            //读取配置的参数
            for (var i = 0; i < this.config.listMapping.length; i++) {
                var o = Util.deepClone(this.config.listMapping[i]);
                if (o.valueSource == 'param') {
                    o.valueSource = 'fixedVar';
                    o.valueDef = this.record[o.valueDef];
                }
                mapping.push(o);
            }
            var self = this;
            this.getParams(mapping, function (params) {
                for (var key in params) {
                    parameter.params += key + '=' + params[key] + '&';
                }
                parameter.params = parameter.params.substring(0, parameter.params.length - 1);
                FormBoListApi.dialog(parameter).then(res => {
                    if (!res.success) {
                        return;
                    }
                    var data = res.data;
                    self.html = data.listHtml;
                    self.load();
                });
            });
        },
        getParams(mapping, callback) {
            PublicApi.getParams(JSON.stringify(mapping)).then(res => {
                callback(res);
            }).catch(err => {
                callback({});
            })
        },
        load() {
            var template = this.$ti18('rxList.noData','无数据'), script = {};
            var templateMath = this.html.match(/<template>([\s\S]*)<\/template>/);
            if (templateMath != null) {
                template = templateMath[1];
            }
            var scriptMath = this.html.match(/<script>([\s\S]*)<\/script>/);
            if (scriptMath != null) {
                script = scriptMath[1];
                script=Util.replaceDefault(script);
                script = eval('(' + script + ')');
            }
            var listComponet = Vue.component('custom-list', {
                mixins: [FormBoListPreview, PublicFunction,FormBoListExt,CustomViewFunc],
                template: template,
                ...script
            })
            this.loadLink();
            this.loadStyle();
            this.currentView = listComponet;
        },
        loadLink() {
            var linkMath = this.html.match(/<link id=".*" href=".*" \/>/g);
            if (linkMath == null) {
                return;
            }
            for (var i = 0; i < linkMath.length; i++) {
                var link = linkMath[i].match(/<link id="([\s\S]*)" href="([\s\S]*)" \/>/);
                if (link) {
                    var id = link[1];
                    var newLink = document.getElementById(id);
                    if (!newLink) {
                        newLink = document.createElement('link');
                        document.getElementsByTagName('head')[0].appendChild(newLink)
                    }
                    newLink.id = id;
                    newLink.rel = "stylesheet";
                    newLink.type = "text/css";
                    newLink.href = link[2];
                }
            }
        },
        loadStyle() {
            var style = "";
            var styleMath = this.html.match(/<style scoped>([\s\S]*)<\/style>/) || this.html.match(/<style>([\s\S]*)<\/style>/);
            if (styleMath != null) {
                style = styleMath[1];
            }

            var newStyle = document.getElementById("previewStyle_" + this.config.listAlias);
            if (!newStyle) {
                newStyle = document.createElement('style');
                document.getElementsByTagName('head')[0].appendChild(newStyle)
            }
            newStyle.id = "previewStyle_" + this.config.listAlias;
            newStyle.innerHTML = style;
        }
    }
}
</script>

<style scoped>
.expandedRowBox {
    height: 300px;
    overflow: auto;
}
</style>